<template>
  <div class="app-container">
    <SearchBar :search="searchParams" @on-search="search">
         <el-form :model="searchParams" inline class="search-form-inline">
             <el-row>
                <el-col :span="12">
                <el-form-item label="公司名称">
                  <el-input v-model="searchParams.companyName" placeholder="公司名称" clearable></el-input>
                </el-form-item>
               </el-col>
                <el-col :span="12">
                <el-form-item label="是否实名">
                  <el-select clearable v-model="searchParams.isRealAuth" placeholder="请选择">
                    <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
               </el-col>
             </el-row>
         </el-form>
    </SearchBar>
     <div>
       <el-button type="success" @click="toCreateAccount" icon="wp wp-icon-save">创建电子合同账号</el-button>
     </div>
      <page-table
         ref="page"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        highlightCurrentRow
        @rowClick="handleSelectionChange"
        :WP_Loading="loading">
          <el-table-column  fixed width="30">
            <template slot-scope="scope">
               <el-radio :label="scope.row.companyCode" v-model="selectCompanyCode">&nbsp;</el-radio>
              </template>
             </el-table-column>
          <el-table-column fixed label="公司名称" width="200" prop="companyName" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-link type="primary" @click.native="toEdit(scope.row)">{{scope.row.companyName}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="公司地址" width="120" prop="address" show-overflow-tooltip></el-table-column>
          <el-table-column label="公司网址" width="120" prop="website" show-overflow-tooltip></el-table-column>
          <el-table-column label="电话" prop="telphone" show-overflow-tooltip></el-table-column>
          <el-table-column label="传真" prop="fax" show-overflow-tooltip></el-table-column>
          <el-table-column label="邮箱" prop="email" show-overflow-tooltip></el-table-column>
          <el-table-column label="公司税号" prop="taxNumber" show-overflow-tooltip></el-table-column>
          <el-table-column label="实名状态" prop="isRealAuth"  :formatter="formatterStatus"/>
          <el-table-column label="电子合同账号" width="120" prop="orgId" show-overflow-tooltip></el-table-column>
          <el-table-column label="开户银行号" width="120" prop="depositBankNo" show-overflow-tooltip></el-table-column>
          <el-table-column label="开户银行" prop="depositBank" show-overflow-tooltip></el-table-column>
          <el-table-column label="法定代表人" width="100" prop="legalName"></el-table-column>
        </page-table>
        <DetailPanle :title="title" :isCreate="isCreate" :visible.sync="visible" :data="companyInfo"  @afterSave="search"/>
        <CreateAccount v-if="visibleCreateAccount" title="创建电子合同账号"  :visible.sync="visibleCreateAccount" :data="currentRow"  @afterSave="search"/>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import DetailPanle from './components/DetailPanle'
import CreateAccount from './components/CreateAccount'
import Mixins from './mixins'
export default {
  components: {SearchBar, PageTable, DetailPanle, CreateAccount},
  mixins: [Mixins],
  mounted () {
    this.search()
  },
  data () {
    return {
      id: 'company',
      visible: false,
      visibleCreateAccount: false,
      title: '',
      isCreate: true,
      selectCompanyCode: null,
      currentRow: {},
      companyInfo: {},
      statusOptions: [{label: '未实名', value: 0}, {label: '已实名', value: 1}]
    }
  },
  methods: {
    handleSelectionChange (row, column, event) {
      console.log('handleSelectionChange', row, column, event)
      this.currentRow = row
      this.selectCompanyCode = row.companyCode
    },
    toCreateAccount () {
      if (!this.currentRow || Object.keys(this.currentRow).length <= 0) {
        this.$msgBox.error('请选择公司')
        return
      }
      if (this.currentRow.orgId) {
        this.$msgBox.error('公司已有电子合同账号')
        return
      }
      this.visibleCreateAccount = true
    },
    toEdit (row) {
      this.visible = true
      this.isCreate = false
      this.title = '编辑公司信息'
      this.companyInfo = {...row}
    },
    formatterStatus (row, column, cellValue, index) {
      const obj = this.statusOptions.find(v => {
        if (cellValue === v.value) {
          return v
        }
      })
      return (obj && obj.label) || cellValue
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
